<template>
  <div class="login-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="form.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'LoginComponent',
  data () {
    return {
      form: {
        account: '',
        password: ''
      }
    }
  },
  mounted () {

  },
  methods: {
    // 提交登录
    ...mapActions([
      'handleLogin'
    ]),
    onSubmit () {
      let obj = this.form
      this.handleLogin(obj).then(res => {
        console.log('handleLogin#')
        console.log(res)
        console.log(this.$router)
        console.log(this.$config.homeName)
        this.$router.push({
          path: '/home/',
          name: 'Home'
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .login-container
    position absolute
    left 70%
    bottom 150px
    width 350px
    height 300px
    background-color rgba(255,255,255,0.5)
    border-radius 20px
    display flex
    justify-content flex-start
    align-items center
</style>
